<template>
  <!--  我的发票-->
  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24">
          <div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span
              class="tbUpPost">发票报销管理

           <span class="tjj-1">
<!--             <el-button color="#626aef" :dark="isDark"  >手动添加</el-button>-->

             <router-link to='/invoicetjjt'>
 <el-button color="#626aef" :dark="isDark">发票添加</el-button>
</router-link>
           </span>







        </span></div>
        </el-col>


      </el-row>

      <el-row>
        <el-col>
          <div class="tbScenDiv">
            <div style="display: flex;width: 900px;flex-direction: row;justify-content: space-between;">
              <span>发票类型：</span>

              <span class="Display_Search_Dept">

              <el-cascader :options="options" ref="abc" @change="getLabel" v-model="d.invoiceTypeSelect">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </span>
              <el-button @click="jj" style="margin-bottom:0px">
                <el-icon><Delete/></el-icon>
              </el-button>

              <span class="
              Display_Search_Buttno">
              <el-button @click="search" style="margin-bottom:10px">
                <el-icon><Search/></el-icon>
              </el-button>
            </span>


              <div class="tbScenCdiv">
                <span>开票日期：</span>
                <el-date-picker
                    v-model="d.invoiceOpendate"
                    value-format="YYYY-MM-DD"
                    placeholder="申请时间"
                    style="width: 168px"
                />


              </div>
              <div>
                <div class="tjj"><input class="tbScenAipt" v-model="d.invoiceSeller"
                                        placeholder="报销人"></div>
              </div>
              <div class="tbScenBdiv"><input class="tbScenAipt" v-model="d.invoiceNumber"
                                             placeholder="发票号码"></div>
            </div>

          </div>


        </el-col>
      </el-row>


      <el-tabs type="border-card" v-model="activeName"

               @tab-click="changePane"
               class="demo-tabs">


        <el-tab-pane label="全部" name="all">

        </el-tab-pane>


        <el-tab-pane label="未报销" name="no">

        </el-tab-pane>


        <el-tab-pane label="已报销" name="also">

        </el-tab-pane>


        <div class="picture" data-v-309cad06="">

          <div class="typeface" data-v-309cad06="">
            <el-row>
              <el-col>
                <el-table :data="d.page.records" style="width: 100%">
                  <el-table-column prop="invoiceId" label="发票编号" width="100"/>
                  <el-table-column prop="invoiceType" label="发票类型" width="160"/>

                  <el-table-column prop="invoiceAddtime" label="创建日期" width="160"/>
                  <el-table-column prop="invoiceOpendate" label="开票日期" width="160"/>
                  <el-table-column prop="invoiceNumber" label="发票号码" width="160"/>
                  <el-table-column prop="invoiceSeller" label="报销人" width="160"/>
                  <el-table-column prop="invoiceState" label="发票状态" width="120"/>
                  <el-table-column prop="invoiceMoney" label="价税合计" width="120"/>
                  <el-table-column
                      fixed="right"
                      label="操作"
                      width="150" key="slot">
                    <template #default="scope">
                      <el-button type="text" @click="edit(scope.row)" size="small">编辑</el-button>
                      <!--                      <el-button  type="text" size="small" @click="del(scop.row)">删除</el-button>-->
                      <el-popconfirm
                          width="200px"
                          confirm-button-text="确认"
                          cancel-button-text="取消"
                          :icon="InfoFilled"
                          icon-color="#626AEF"
                          title="确定删除此条数据吗"
                          @confirm="confirmEvent(scope.row)"
                          @cancel="cancelEvent"
                      >
                        <template #reference>
                          <el-button type="text" size="small">删除</el-button>
                        </template>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row justify="center">
              <el-col>

                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="d.page.current"
                    :page-sizes="[4,8]"
                    small="small"
                    :page-size="d.page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="d.page.total"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>

      </el-tabs>

      <!--          编辑发票弹窗-->

      <el-dialog v-model="dialogFormVisible" title="编辑发票" width="1100px">
        <invoiceForm :edit="true" :editForm="d.editForm" @editSuccess="editSuccess"></invoiceForm>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script lang="ts" setup>

import  invoiceForm from "./Invoicetjjt.vue"

import {ref, reactive, toRefs, onBeforeMount, nextTick} from "vue";
import { ElMessage } from 'element-plus'
import axios from "axios";
const dialogFormVisible = ref(false)

const options = [
  {
    value: '1',
    label: '全部',
  },
  {
    value: '2',
    label: '电子发票',
  },
  {
    value: '3',
    label: '普通发票',
  },
  {
    value: '4',
    label: '国际发票',
  },

]

//重置按钮
const jj = () =>{
  resetForm();

}
//清空表单
const resetForm=()=>{
  d.invoiceOpendate=null;
  d.invoiceNumber=null;
  d.invoiceSeller=null;
}


const souForm = reactive({
  personnelTime: '',
  personnelTypet: '',

})
const hidddiv = ref(false)
const d = reactive({
  page: {
    records: [], //记录
    size: 4, //每页条数
    current: 1, //当前页
    total: 1, //总数
    pages: 1, //页数
  },
  invoiceState: '',//发票状态
  invoiceType: '',
  invoiceOpendate: '',
  invoiceNumber: '',
  invoiceSeller: '',

  invoiceTypeSelect: "",
  applyDate: [],

  editForm:{

  }
});


const {total, pageNo, pageSize} = toRefs(d);

// 默认点击进来就是全部页面
const activeName = ref('all')
const getList = () => {

  let param = {
    current: d.page.current,
    size: d.page.size,
    invoiceState: d.invoiceState,
    invoiceType: d.invoiceType,
    invoiceOpendate: d.invoiceOpendate,
    invoiceNumber: d.invoiceNumber,
    invoiceSeller: d.invoiceSeller,
  }
  axios.get('http://localhost:1688/selectInvoice/page',
      {
        params: param
      }).then(res => {
    let obj = res.data.data;
    console.log(obj)
    d.page.records = obj.records;
    d.page.current = obj.current;
    d.page.total = obj.total;
    d.page.pages = obj.pages;
    d.page.size = obj.size;
  })

}


const search = (val) => {
  getList();
}




const getLabel = (val) => {
  let invoiceTypeSelect = d.invoiceTypeSelect;
  if (invoiceTypeSelect == "1") {
    d.invoiceType = '';
  } else if (invoiceTypeSelect == "2") {
    d.invoiceType = '电子发票';
  } else if (invoiceTypeSelect == "3") {
    d.invoiceType = '普通发票';
  } else if (invoiceTypeSelect == "4") {
    d.invoiceType = '国际发票';
  }
  // getList();
}


const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  d.page.size = val;
  getList();
}

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  d.page.current = val;
  getList();
}

const changePane = (tab, event) => {
  d.page.current = 1;

  if (tab.paneName == 'all') {
    d.invoiceState = "";
  } else if (tab.paneName == 'no') {
    d.invoiceState = "未报销";
  } else {
    d.invoiceState = "已报销";
  }
  getList();


}


const confirmEvent = (row) => {
  console.log(row,'confirm!')

  axios.get('http://localhost:1688/selectInvoice/del',
      {
        params: {
          invoiceId:row.invoiceId
        }
      }).then(res => {
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
    getList()
  })

}
const cancelEvent = () => {
  console.log('cancel!')
}


/**
 * 获取详情
 * @param val
 */
const getInfo = (val) => {

}
// edit del
/**
 * 编辑
 * @param val
 */
const edit = (row) => {
  // axios.post("http://localhost:1688/selectInvoice/edit",form).then(res=>{
  //   console.log('res=>',res);
  //   alert("保存成功")
  // })
  dialogFormVisible.value = true
  // d.invoiceId = row.invoiceId
  d.editForm = row
  console.log(d.editForm,'gfg')
}

const editSuccess = () =>{
  ElMessage({
    message: '编辑成功',
    type: 'success',
  })
  getList()
  dialogFormVisible.value = false
}


/**
 * 删除
 * @param val
 */
const del = (val) => {
  alert(val)
//http://localhost:1688/selectInvoice/del?invoiceId=xxxxxx
}


onBeforeMount(async () => {
  nextTick(() => {
    getList();
  })
})


</script>

<style scoped>
.tbUpDiv {
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;

}
.Display_Search_Dept{



}
.Display_Search_Buttno{
  position: absolute;
  left: 360px;
}
.tbImg {
  margin-left: 30px;
  margin-top: 15px;
}

.tbUpPost {
  position: relative;
  top: -19px;
  left: 20px;
}

.tbScenDiv {
  border-bottom: 1px solid gainsboro;
  /*position: relative;*/
  display: flex;
  justify-content: space-between;
}

.tbScenAdiv {
  /*width: 200px;*/
  /*margin-top: 10px;*/
  /*margin-left: 30px;*/
  font-size: 14px;
}

.tjj {
  position: relative;
  left: 200px;
}

.tjj-1 {
  margin: 0px 10px;
  position: relative;
  left: 820px;
}

.tbScenBdiv {
  position: relative;
  left: 180px;
  /*top: -34px;*/
  font-size: 14px;
  /*width: 400px;*/
}

.tbScenCdiv {
position: absolute;
  left: 480px;
  /*top: -69px;*/
  font-size: 14px;
  /*width: 400px;*/
}

.tbScenDdiv {
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}

.tbScenAipt {
  width: 150px;
  height: 30px;
  border: 1px solid gainsboro;
}

.tbScenBipt {
  /*width: 150px;*/
  /*height: 30px;*/
  position: absolute;

}

.tbFirstBu {
  height: 35px;
  /*margin-left: 100px;*/
  /*margin-top: -54px;*/
}

.tbhide {
}

</style>
